// 步骤1：导入 vue这个包
// var Vue = require('vue');
import Vue from 'vue';

// 步骤2：想要解析和呈现App.vue组件的内容，则导入 App.vue组件
// var App = require('./App.vue');
import App from './App.vue'; //主组件


// 1.0 路由的写法
// 1.0.0 导包
import vueRouter from 'vue-router';

// 1.0.2 将vueRouter和vue绑定起来
Vue.use(vueRouter); //全局使用路由// 将路由vueRouter对象绑定到vue对象上

// 1.0.3 定义路由规则
import layout from './components/site/layout.vue'; // 导入后台管理系统的整体布局组件
import goodslist from './components/site/goods/goodslist.vue'; // 导入goodslist.vue
import goodsinfo from './components/site/goods/goodsinfo.vue'; //商品详情
import car from './components/site/goods/car.vue'; //购物车
import goodsshopping from './components/site/goods/goodsshopping.vue'; //购物车
import login from './components/site/goods/login.vue'; //购物车
import pay from './components/site/goods/pay.vue'; //扫码支付页面
import paybutton from './components/site/goods/paybutton.vue'; //扫码支付页面
import paysuccess from './components/site/goods/paysuccess.vue'; //扫码支付成功后跳转的页面
import vipcenter from './components/site/goods/vipcenter.vue'; //会员中心
import vipgoodslist from './components/site/goods/vipgoodslist.vue'; //交易订单
import vipgoodsone from './components/site/goods/vipgoodsone.vue'; //交易订单

// 定义路由规则
var router = new vueRouter({
    routes: [
        { name: 'default', path: '/', redirect: '/site' }, //默认的根路径的时候
        { name: 'paybuttonMB', path: '/site/paybutton/:ouderID/:acount', component: paybutton }, //手机扫码访问过来的支付按钮页面
        { name: 'paysuccessMB', path: '/site/paysuccess/:ouderID', component: paysuccess }, //手机扫码支付成功组件
        {
            name: 'layout',
            path: '/site',
            component: layout,
            children: [
                { name: 'goodslist', path: 'goodslist', component: goodslist },
                { name: 'goodsinfo', path: 'goodsinfo/:infoID', component: goodsinfo },
                { name: 'car', path: 'car', component: car }, //购物车
                { name: 'goodsshopping', path: 'goodsshopping/:ids', component: goodsshopping, meta: { islogin: true } }, //下单页面
                { name: 'login', path: 'login', component: login }, //登录页面
                { name: 'pay', path: 'pay/:ouderID', component: pay, meta: { islogin: true } }, //扫码支付页面
                { name: 'paybutton', path: 'paybuttonpc/:ouderID/:acount', component: paybutton, }, //电脑直接访问支付按钮页面 ,把ID和总价传到支付页面,通过URL的方式,不安全??????
                { name: 'paysuccess', path: 'paysuccesspc', component: paysuccess, }, //电脑支付成功组件
                { name: 'vipcenter', path: 'vip/center', component: vipcenter, meta: { islogin: true } }, //会员中心
                { name: 'vipgoodslist', path: 'vip/goodslist', component: vipgoodslist, meta: { islogin: true } }, //交易订单
                { name: 'vipgoodsone', path: 'vip/goodsone/:orderID', component: vipgoodsone, meta: { islogin: true } }, //交易订单详情
            ]
        },
    ]
})


// 定义路由全局守卫
// 作用: 当在购物车页面点击立即购买的时候,需要做判断,判断是否有登录,如果有登录,直接挑战到立即购买页面,否则跳转到登陆页面
router.beforeEach((to, from, next) => {

    // console.log(to);
    // 存储to.name在本地localStroage里面
    if (to.name !== 'login') {
        localStorage.setItem('toNameUrl', to.name);
    }
    // 
    if (to.meta.islogin) { //需要登录验证
        // 判断当前时候有登录,有登录了,直接next
        var url = '/site/account/islogin';
        axios.get(url).then(res => {
            if (res.data.code == 'logined') { //已经登录过了
                // console.log(1111);
                next(); //如果登录了,那就直接下一步
            } else {
                //否则跳转到登陆页面
                router.push({ name: 'login' });
            }
        })

    } else { //不需要登录验证
        next();
    }


})



// 2.0 axios的使用
// 2.0.1 导入axios包
import axios from 'axios';
// 2.0.2 设定axios的基本的url请求前缀
axios.defaults.baseURL = 'http://157.122.54.189:9095';

// 设定axios的参数使得axios发出的ajax请求能够自动带上cookie
axios.defaults.withCredentials = true;

// 2.0.3 想要在将来的每个子组件中的方法中均可以使用 this.$http去调用其方法执行ajax请求
//就要将axios对象挂载到vue的原型属性$http上
Vue.prototype.$http = axios;



// 2.0.4 绑定到vue上
Vue.use(axios);




// 3.0 使用elementUI这个ui框架的步骤
// 3.0.1、导包
import ElementUI from 'element-ui';
// 3.0.2 导入elemeui的css控制样式
// 由于项目的样式和elementui的css样式有些不一样，那么修改了这个样式以后，要利用自己的样式替换原来的原有样式

// import 'element-ui/lib/theme-default/index.css';
// import '../statics/elementuiCss/index.css'; //修改elementUI默认样式文件，所以导入的路径有所改变
// import '../statics/css/site.css'; // 将此项目的全局样式导入到elementui中的css之后

// 导入前台全局样式
import '../statics/site/css/style.css';

// 3.0.3 绑定
Vue.use(ElementUI); //全局使用ElementUI



// 公有过滤器(全局过滤器)
Vue.filter('timefil', (input, str) => {
    // return '2017-10-10'
    var timeDate = new Date(input);
    var y = timeDate.getFullYear();
    y = y < 10 ? '0' + y : y;
    var m = timeDate.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = timeDate.getDate();
    d = d < 10 ? '0' + d : d;
    var h = timeDate.getHours();
    h = h < 10 ? '0' + h : h;
    var mm = timeDate.getMinutes();
    mm = mm < 10 ? '0' + mm : mm;
    var s = timeDate.getSeconds();
    s = s < 10 ? '0' + s : s;
    if (str == 'YY-MM-DD HH:mm:ss') {
        return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;
    }
    if (str == 'YY-MM-DD') {
        return y + '-' + m + '-' + d;
    }
})


new Vue({
    el: '#app',
    router, //使用路由对象实例
    // render: function(create) {
    //     create(App)
    // },
    // es6的写法:将app当做根组件替换index1.html这个模板中的<div id="app">
    render: create => create(App)
});